<template>
    <admin-container :title="title">

        <div v-show="routeName === 'AclRole'">
            <k-table-search>
                <template>
                    <div>
                        <el-button icon="el-icon-plus"
                                   @click="$router.push({ name: 'AclRoleEdit' })"
                                   type="primary">
                            添加角色
                        </el-button>
                    </div>
                </template>

                <template #right>
                    <el-form inline @submit.prevent.native="onSubmitSearch">
                        <el-form-item>
                            <el-input v-model="search.key"
                                      clearable
                                      placeholder="输入角色名称"/>
                        </el-form-item>

                        <el-form-item>
                            <el-button native-type="submit">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </k-table-search>

            <k-table :load="onLoad">
                <el-table-column prop="id" label="ID"/>

                <el-table-column label="头像" width="80">
                    <template v-slot="{ row }">
                        <el-image class="ke-avatar" :src="row.avatar"/>
                    </template>
                </el-table-column>

                <el-table-column prop="nickname" label="显示名称"/>

                <el-table-column prop="username" label="账号"/>

                <el-table-column prop="phone" label="手机号码"/>

                <el-table-column prop="create_time" label="创建时间"/>

                <el-table-column label="操作">
                    <template v-slot="scope">
                        <k-table-actions @command="onCommand($event, scope)">
                            <k-table-action-item command="edit" label="编辑"/>

                            <k-table-action-item command="delete" label="删除"/>
                        </k-table-actions>
                    </template>
                </el-table-column>
            </k-table>
        </div>

        <router-view/>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import KTable from '@/components/table/index.vue';
import KTableActions from '@/components/table-actions/index.vue';
import KTableActionItem from '@/components/table-actions/item.vue';
import { getAuthRoles } from '@/services/auth/role.service';
import KTableSearch from '@/components/table-search.vue';

@Component({
    components: {
        KTableSearch,
        KTableActionItem,
        KTableActions,
        KTable,
        AdminContainer,
    },
    provide() {
        return {
            root: this,
        };
    }
})
export default class SystemAclUsers extends Vue {
    search: any = {};

    get routeName(): string {
        return this.$route.name as string;
    }

    get title(): string | null {
        if (this.routeName === 'AclRole') {
            return null;
        }
        return this.$route.query.id ? '编辑角色信息' : '添加角色';
    }

    mounted() {
        console.log('index data');
    }

    onSubmitSearch() {
        this.onLoad();
    }

    onLoad(state?: any) {
        return getAuthRoles({
            ...state,
            ...this.search,
        })
            .then(result => {
                return result.data;
            })
    }

    onCommand(command: string, { row }: { row: any }) {
        if (command === 'edit') {
            this.$router.push({
                name: 'AclUsersEdit',
                query: { id: row.id }
            });
        }

    }
}
</script>
